<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!-- 4.制作4个嵌套DIV ，要求：
	      1.每个父DIV尺寸必须大于子DIV
	      2.实现每个DIV在父DIV正中间
	      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
	      4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
	      5.查找每个DIV的子元素和子节点 -->
		  <style type="text/css">
		  	#div{
				width: 600px;
				height: 600px;
				background-color: aquamarine;
				
			}
			#div1{
				width: 500px;
				height: 500px;
				background-color: bisque;
                margin-top: 25px;
			    margin-left: 50px;
			}
			#div2{
                width: 400px;
			    height: 400px;
				background-color: #F4A460;
				margin-top: 25px;
				margin-left: 50px;
			}
			#div3{
 				width: 300px;
				height: 300px;
				background-color: blueviolet;
				margin-top: 25px;
				margin-left: 50px;
			}
		  </style>
	<body>
		<div id="div">
			第一个div
			<div id="div1">
				第二个div
				<div id="div2">
					第三个div
					<div id="div3">
						第四个div
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var dv1=document.getElementById('div');
		console.log('1级父元素为:'+console.log(dv1.parentElement));
		console.log('1级父节点为:'+console.log(dv1.parentNode));
		var dv2=document.getElementById('div1');
		console.log('2级父元素为:'+console.log(dv2.parentElement));
		console.log('2级父节点为:'+console.log(dv2.parentNode));
		var dv3=document.getElementById('div2');
		console.log('3级父元素为:'+console.log(dv3.parentElement));
		console.log('3级父节点为:'+console.log(dv3.parentNode));
		var dv4=document.getElementById('div3');
		console.log('4级父元素为:'+console.log(dv4.parentElement));
		console.log('4级父节点为:'+console.log(dv4.parentNode));
	    var d1=document.getElementById('div');
		console.log(d1.children);
		console.log(d1.childNodes);
		var d2=document.getElementById('div1');
		console.log(d2.children);
		console.log(d2.childNodes);
		var d3=document.getElementById('div2');
		console.log(d3.children);
		console.log(d3.childNodes);
		
	</script>
</html>
